import React,{useEffect,useRef} from 'react';  
import * as echarts from 'echarts'
export default function Index(){
    const domZRef = useRef()
    const domZXRef = useRef()
    const domYuanRef = useRef();
    const domLeiDaRef = useRef();
    useEffect(()=>{
        chatZInit();
        chatZXInit();
        chatYuanInit();
        chatLeidaInit();
    })
    const chatLeidaInit=()=>{
        const myChart=echarts.init(domLeiDaRef.current)
        myChart.setOption({
              legend: {
                data: ['Allocated Budget', 'Actual Spending']
              },
              radar: {
                // shape: 'circle',
                indicator: [
                  { name: 'Sales', max: 6500 },
                  { name: 'Administration', max: 16000 },
                  { name: 'Information Technology', max: 30000 },
                  { name: 'Customer Support', max: 38000 },
                  { name: 'Development', max: 52000 },
                  { name: 'Marketing', max: 25000 }
                ]
              },
              series: [
                {
                  name: 'Budget vs spending',
                  type: 'radar',
                  data: [
                    {
                      value: [4200, 3000, 20000, 35000, 50000, 18000],
                      name: 'Allocated Budget'
                    },
                    {
                      value: [5000, 14000, 28000, 26000, 42000, 21000],
                      name: 'Actual Spending'
                    }
                  ]
                }
              ]
        })
    }
    const chatYuanInit=()=>{
        const myChart=echarts.init(domYuanRef.current)
        myChart.setOption({
              title: {
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'right',
                top:'150px'
              },
              series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
    }
    const chatZXInit=()=>{
        const myChart=echarts.init(domZXRef.current)
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        })
    }
    const chatZInit=()=>{
        const myChart=echarts.init(domZRef.current)
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                }
            ]
        })
    }
    return(
        <div style={{display:'flex',justifyContent:'space-between',flexWrap:'wrap'}}>
           <div ref={domZRef} style={{width:'48%',height:'500px'}}></div>
           <div ref={domZXRef} style={{width:'49%',height:'500px'}}></div>
           <div ref={domYuanRef} style={{width:'49%',height:'500px'}}></div>
           <div ref={domLeiDaRef} style={{width:'49%',height:'500px'}}></div>
        </div>
    )
}